<template>
  <div class="staff_container" id="a">
              <!-- 工作类型 -->
          <van-popup v-model="modelShow"   :style="{ width:'80%',height: '30%' }">
            <!-- 弹出层的内容 -->
            <!-- <h1>工作类型</h1> -->
            <van-picker :columns="columns" @change="onChange" />
          </van-popup>
    <van-swipe-cell :right-width="65" :on-close="onClose">

      <van-row gutter="20">

        <!-- 我奥工作人员头像获取 -->
        <van-col span="4" class="van-col-photo" :style="{padding: 0}">
            <van-uploader :after-read="onRead">
              <van-icon name="photograph" color="red" size="6vw" class="staff-photo"/>
            </van-uploader>
        </van-col>

          <!-- 我奥工作人员名称 -->
        <van-col span="8" :style="{ padding:'0px'}">
          <input type="text" placeholder="name" class="van-input-name" >
        </van-col>

        <!-- 工作类型 选择-->

        <van-col span="8" class="Type-work" @click="modelShow = !modelShow" :style="{ padding:'0px'}">

          <p class="van-p-type">职位：{{ careervalue }}</p>
        </van-col>

        <!-- 最左边滑动按钮 -->
        <van-col span="4">
            <van-icon name="arrow-left" class="staff-arrow-left"/>
        </van-col>
      </van-row>
      <span slot="right">删除</span>
    </van-swipe-cell>
  </div>
</template>

<script>
export default {
  name: 'add-staff',
  data () {
    return {
      modelShow: false,
      columns: ['主裁', '副裁', '技术代表', '记录台'],
      careervalue: '',
      zhanwei: ' '
    }
  },
  methods: {
    onRead (file) {
      console.log(file)
    },
    onChange (picker, value, index) {
      // this.$toast(`当前值：${value}, 当前索引：${index}`)
      this.careervalue = value
      this.modelShow = !this.modelShow
    },
    onClose (clickPosition, instance) {
      switch (clickPosition) {
        case 'left':
        case 'cell':
        case 'outside':
          instance.close()
          break
        case 'right':
          this.$dialog.confirm({
            message: '确定删除吗？'
          }).then(() => {
            const b = document.querySelector('#a')
            b.style.display = 'none'
            instance.close()
          })
          break
      }
    }
  }
}
</script>

<style scoped>
*{
  padding: 0;
  margin: 0;
}
.staff_container{
  margin-top: 10px;
}
.van-row{
  width: 100%;
  height: 15vw;
  line-height: 15vw;
  background-color: rgb(255, 255, 255);
  text-align: center;
}
.Type-work{
  /* background-color: aqua; */
  padding-left: 0px;
}
.van-input-name{
  display: inline-block;
  width: 100%;
  height: 8vw;
  border: 2px dashed black;
  text-align: center;
}
.van-p-type{
  display: inline-block;
  width: 100%;
  height: 8vw;
  line-height: 8vw;
  border: 2px dashed black
}
.van-col-photo{
  position: relative;
  /* border: 2px dashed black; */
  line-height: 12vw;
}
.staff-photo::before{
  /* border: 2px dashed black; */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50% ,-50%);
}
::v-deep .van-swipe-cell__right{
    background-color: red;
    width: 16vw;
    color: white;
    line-height: 14vw;
    text-align: center;
}

</style>
